<template>
<div id="cyprofile">
    <div class="cynav-bar">
    <div class="cyleft">
      <slot name="cyleft">
          <van-icon name="arrow-left" size="1.5rem" />
      </slot>
    </div>
    <div class="cycenter">
      <slot name="cycenter">我的聚美</slot>
    </div>
    <div class="cyright">
      <slot name="cyright">
          <van-icon name="wap-home-o" size="1.5rem" />
      </slot>
    </div>
    </div>

    <div class="cyuser-unlogin">
        <div class="cynoportrait">
           <van-icon class="cyicon-bars3" name="contact" size="2rem" color="#fd465f" />
        </div>
        <div class="cyoperation" v-if="!isLogin">
            <span class="cysignup"  @click="registerClick()">注册</span>
            <div style="margin-top:4px;" class="cyseparator"></div>
            <span class="cylogin" @click="loginClick()">登录</span>
        </div>
        <div class="cyoperation" v-else>
            <span class="cysignup">用户：{{username}}</span>
        </div>
    </div>

    <div class="cyorder cyblock">
        <div class="cyblock-title">
            <van-icon class="cyicon-bars6" name="label-o" size="1.5rem" color="#333" />
            我的订单
            <div class="cyblock-title-nav">
            <span>查看我的全部订单</span>
            <van-icon class="cyicon-bars1" name="arrow" size="1.5rem" color="#999" />
            </div>
        </div>
         <div class="cyblock-content">
              <div class="cyblock-item">
                <van-icon class="cyicon-bars4" name="pending-payment" size="1.9rem" color="#333" />
                <span>待付款</span>
              </div>
              <div class="cyblock-item">
                <van-icon class="cyicon-bars4" name="idcard" size="1.9rem" color="#333" />
                <span>待收货</span>
              </div>
              <div class="cyblock-item">
                <van-icon class="cyicon-bars4" name="comment-o" size="1.9rem" color="#333" />
                <span>待评价</span>
              </div>
              <div class="cyblock-item">
                <van-icon class="cyicon-bars4" name="after-sale" size="1.9rem" color="#333" />
                <span>退货/退款</span>
              </div>
        </div>
    </div>

    <div class="cyfund cyblock">
        <div class="cyblock-title">
           <van-icon class="cyicon-bars6" name="gold-coin-o" size="1.5rem" color="#333" />
            我的资产
        </div>
        <div class="cyblock-content">
                <span>现金券</span>
                <span>红包</span>
                <span>聚美余额</span>
                <span>礼品卡</span>
        </div>
    </div>

    <div class="cyblock cylist">
        <div class="cylist-item">
           <van-icon class="cyicon-bars6" name="service-o" size="1.5rem" color="#333" />
            <span>售后服务</span>
            <van-icon class="cyicon-bars2" name="arrow" size="1.5rem" color="#999" />
        </div>
        <div class="cylist-item">
             <van-icon class="cyicon-bars6" name="envelop-o" size="1.5rem" color="#333" />
            <span>意见反馈</span>
            <van-icon class="cyicon-bars2" name="arrow" size="1.5rem" color="#999" />
        </div>
        <div class="cylist-item">
            <van-icon class="cyicon-bars6" name="logistics" size="1.5rem" color="#333" />
            <span>收货地址</span>
            <van-icon class="cyicon-bars2" name="arrow" size="1.5rem" color="#999" />
        </div>
        <div class="cylist-item"  @click="logOutConfirm">
            <van-icon class="cyicon-bars6" name="failure" size="1.5rem" color="#333" />
            <span>退出登录</span>
             <van-icon class="cyicon-bars2" name="arrow" size="1.5rem" color="#999" />
        </div>
        <div class="cylist-item">
            <van-icon class="cyicon-bars6" name="phone-o" size="1.5rem" color="#333" />
            <span>400-123-8888</span>
             <van-icon class="cyicon-bars2" name="arrow" size="1.5rem" color="#999" />
        </div>
    </div>
    <div class="cyhint" style="padding-bottom:3.0625rem">
    客服热线400-123-8888 (9:00-18:00)<br>拨打前请记录您的UID 0    </div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
 export default {
     methods: {
         ...mapMutations('user', ['logout']),
         loginClick () {
             console.log('登录');
             this.$router.push("/login")
         },
         registerClick () {
             console.log('注册');
             this.$router.push("/register")
         },
         logOutConfirm(){
             console.log('logout')
             this.$dialog.confirm({
                 title: '退出',
                 message: '是否退出!'
             }).then(() => {
                 this.logout()
             }).catch(() => {
             });
         }
     },
     computed:{
         ...mapState('user', ['isLogin', 'username', 'token'])
     },
     mounted() {
     }
 }
</script>
<style scoped>
.cyuser-unlogin {
    box-sizing: border-box;
    height: 158px;
    background-image: -webkit-linear-gradient(294deg,#fd465f 0,#fc5e9f 100%);
    background-image: linear-gradient(-204deg,#fd465f 0,#fc5e9f 100%);
    padding-top: 25px;
}
.cynoportrait {
    background:#fff;
    width: 19%;
    height: 71px;
    border-radius: 50%;
    margin: auto;
}
.cyicon-bars3{
    margin: 25%;
}
.cyoperation {
    padding: 10px;
    width: 61%;
    margin: auto;
}
.cyoperation span{
    line-height: 25px;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: 49%;
}
.cyseparator {
    background: #fff;
    width: 0.5%;
    display: inline-block;
    height: 15px;
    vertical-align: middle;
}

.cyblock-title-nav {
    float: right;
    color: #999;
    margin-right: 5px;
}
.cyblock {
    background: #fff;
    margin-top: 16px;
    font-size: 16px;
}
.cyblock-title {
    padding-left: 8px;
    border-bottom: 1px solid #eaeaea;
    height: 40px;
    line-height: 40px;
}
.cyblock-title span{
    color: #999;
}
.cyblock-content, .cyoperation {
    display: flex;
}
.cyfund .cyblock-item, .cyorder .cyblock-item {
    width: 23%;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 10px 0;
    text-decoration: none;
    color: #666;
}
.cyblock-item {
    width: 25% !important;
}
.cyicon-bars4{
    display: block;
    margin: 5px auto;
}
.cyblock-content span{
    flex: 1;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 10px 0;
    text-decoration: none;
    color: #666;
}
.cylist-item {
    display: block;
    text-decoration: none;
    color: #333;
    padding-left: 8px;
    border-bottom: 1px solid #eaeaea;
    height: 34px;
    line-height: 34px;
}
.cyhint {
    color: #999;
    margin: 15px;
    line-height: 15px;
    font-size: 14px;
}

.cyicon-bars6{
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.cyicon-bars1{
    display: inline-block;
    vertical-align: middle;
}
.cyicon-bars2{
    float: right;
    margin-top: 6px;
    margin-right: 6px;
}

.cynav-bar {
  display: flex;
  color: #fff;
  font-size: 16px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #fd4a69;
}
.cyleft{
    float: left;
    margin-top: 2%;
}
.cyright {
  margin-top: 2%;
}
.cycenter {
  flex: 1;
}
</style>
